<script setup lang="ts">
defineOptions({
  name: "ExposureAnalysis"
});
import ExposureAnalysisHead from "./components/Head.vue";
import ExposureAnalysisBottom from "./components/Bottom.vue";
import ExposureAnalysisRight from "./components/Right.vue";
import LineChart from "./components/LineChart.vue";
import DynamicSortingBarChart from "./components/DynamicSortingBarChart.vue";
import Map from "./components/Map/Map.vue";
import Liquidfill from "./components/Liquidfill.vue";
</script>

<template>
  <dv-full-screen-container>
    <div class="box">
      <div class="head">
        <ExposureAnalysisHead />
      </div>
      <div class="box-container">
        <div class="container-left">
          <div class="container-left-item">
            <dv-border-box-12><Liquidfill /></dv-border-box-12>
          </div>
          >
          <div class="container-left-item">
            <dv-border-box-12><LineChart /></dv-border-box-12>
          </div>
        </div>
        <div class="container-center">
          <Map />
        </div>
        <div class="container-right">
          <dv-border-box-12>
            <DynamicSortingBarChart />
          </dv-border-box-12>
        </div>
      </div>
      <div class="bottom">
        <dv-border-box-12><ExposureAnalysisBottom /></dv-border-box-12>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
$head-height: 3rem; //头部高度
$container-height: 40rem;
$gap: 1rem; //模块间距

.box {
  width: 100%;
  height: 100%;
  background: url("./components/src/assets/bg.jpg") no-repeat center center;
  background-size: 100% 100%;

  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: $head-height;
  }

  .box-container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 2.35fr 1fr;
    gap: $gap;
    width: 100%;
    height: $container-height;
    padding: 20px;

    .container-left {
      .container-left-item {
        box-sizing: border-box;
      }
    }

    .container-center {
      height: 100%;
    }

    .container-right {
      height: 100%;
    }
  }

  .bottom {
    width: 100%;
    height: calc(100% - $head-height - $container-height);
    padding: 20px;
  }
}
</style>
